<template>
    <div style="width:86%;margin:auto;height:100vh">
        <div class="query1">
            <input v-model="findText" type="text">
            <button @click="find()">查找</button>
        </div>
        <hr style="border:1px solid hotpink">

        <div style="width:100%;display:flex;justify-content:space-between;">
            <!-- 左边导航栏 -->
            <div style="width:15%;">
                <el-menu unique-opened style="height:100%;">
                    <el-menu-item @click="all();typeid=0" index="0">
                        <i class="el-icon-s-grid"></i>
                        <span slot="title">全部商品</span>
                    </el-menu-item>
                    <el-submenu :index="idx+''" v-for="(item, idx) in types" :key="idx">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{item.type}}</span>
                        </template>
                        <el-menu-item-group v-if="item.children.length!=0">
                            <el-menu-item :index="idx+'-'+index" @click="getBookById(chil.id)" 
                                        v-for="(chil, index) in item.children" :key="index">
                                <span slot="title">{{chil.type}}</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>

            <!-- 右边显示栏 -->
            <div style="width:81%;margin-left: 3%;">

                <div style="display: flex;flex-wrap: wrap;">
                    <div style="display: flex;justify-content: space-between;width:50%;
                    max-height:15vw;" v-for="(item, index) in books" :key="index">
                        <div style="min-width:10vw;width: 10vw;height: 12vw;">
                            <img :src="`${imgUrl}/api/public/showImg/${item.picture}`"
                            style="display:block ;width:90%; height:80%;">
                        </div>
                        <div :class="{bookss:activ==item.id}" 
                            @mouseenter="seenter(item.id)"
                            @mouseleave="seleave()"
                        style="width:30vw;line-height:16px;text-align:left;height:80%;">
                            <p v-html="item.name"></p>
                            <p v-html="item.author"></p>
                            <p v-html="item.publisher"></p>
                            <p>
                                ￥{{item.price}}&nbsp;
                                <el-button @click="buy(item)"  type="danger" size="mini">购买</el-button>
                            </p>
                        </div>
                    </div>
                </div>

                <el-pagination :hide-on-single-page="total<=8" 
                            background layout="prev, pager, next" 
                            :total="total" :page-size="8"  :current-page.sync="currentPage"
                            @current-change="pageChange" >
                </el-pagination>

            </div>   
        </div>
    </div>
</template>
<script>
    export default {
        name: "Details",
        props: [],
        data() {
            return {
                currentPage:1,//切换类型数据的时候分页强制回到第一页
                types:[], //类型
                typeid:0,//书本类型id
                books:[], //书本数据
                findText:'', //模糊查询
                total:0,//书本的总行数
                num:8, //每页多少行
                start:0, //当前页数
                activ:0 //鼠标移入书本是阴影样式生效不生效
            };
        },
        methods: {
            buy(item){
                if(this.$store.state.isLogin==false){
                    this.$message.error('请登录后再购买');
                    return;
                }
                this.$postX("/api/fore/cart/addCart",{bookid:item.id,num:1,tcreate:this.df(new Date())})
                .then(function(resp){
                    if(resp.data.data==1){
                        _this.$message({
                            message: '添加购物车成功',
                            type: 'success'
                        });
                        return;
                    }
                })
            },
            seenter(id){
                this.activ = id
            },
            seleave(){
                this.activ=0
            },
            //分页按钮
            pageChange(n){
                this.start = n;
                //n 当前页数
                if(this.findText!='' || this.findText==null){
                    let fd = new FormData();
                    fd.append("key",this.findText)
                    this.$postFile("/api/public/book/findIf/"+((n-1)*this.num)+"/"+this.num,fd).then(
                        function(resp) {
                            _this.books = resp.data.data.books
                            _this.total = resp.data.data.total;
                        }
                    )
                    return;
                }
                
                var url = "/api/public/findBookByPage/"+((n-1)*this.num)+"/"+this.num+"/"+this.typeid
                this.$get(url).then(
                    function(resp){
                        _this.books = resp.data.data.books;
                    }
                )
            },
            //全部商品
            all(){
                this.findText = ''
                this.currentPage = 1;
                this.$get("/api/public/findBookByPage/0/8/0").then(
                    function(resp) {
                        _this.books = resp.data.data.books;
                        _this.total = resp.data.data.total;
                    }
                )
            },
            //每个类型的books
            getBookById(typeid){
                console.log(typeid);
                this.total = 0;
                this.findText = ''
                this.currentPage = 1;
                this.typeid = typeid
                this.$get("/api/public/findBookByPage/0/8/"+typeid).then(
                    function(resp) {
                        _this.books = resp.data.data.books;
                        _this.total = resp.data.data.total;
                    }
                ).catch(function(Response){
                    _this.books = [];
                })    
            },
            //模糊查询
            find(){
                let fd = new FormData();
                fd.append("key",this.findText)
                this.$postFile("/api/public/book/findIf/0/8",fd).then(
                    function(resp) {
                        console.log(resp.data.data);
                        _this.books = resp.data.data.books
                        _this.total = resp.data.data.total;
                    }
                )
            },
        },
        mounted() {
            window._this = this;
            this.$get("/api/public/type/findAll2").then(
                function(resp) {
                    var types = resp.data.data;
                    for (const i in types) {
                        if(types[i].pid == 0){
                            types[i].children = []
                            for (const j in types) {
                                if(types[i].id==types[j].pid){
                                    types[i].children.push(types[j])
                                }
                            }
                            _this.types.push(types[i])
                        }
                    }
                }
            ) 

            let  seekText =  this.$route.query.seekText;
            if(seekText!=undefined){
                this.findText = seekText;
                this.find();
            }

        }
    };
</script>
<style scoped="scoped">
    .query1{
        display: flex;
        justify-content:space-between;
        width: 12vw;
        margin-top:15px; 
        
    }
    .query1 button{
        border: 1px solid hotpink;
        border-radius: 5px;
    }
    .query1 input{
        border-style:solid;
        outline: none;
        border-radius: 5px;
        border-color: hotpink;
    }
    .bookss{
        background: rgb(231, 225, 225,0.5);
        cursor: pointer;
    }
    .typeStyle{
        color: red;
    }
</style>
